<script setup lang="ts">
import { ref, watch, computed, onMounted, unref } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('logo')

const appStore = useAppStore()

const show = ref(true)

const title = computed(() => appStore.getTitle)

const layout = computed(() => appStore.getLayout)

const collapse = computed(() => appStore.getCollapse)

onMounted(() => {
  if (unref(collapse)) show.value = false
})

watch(
  () => collapse.value,
  (collapse: boolean) => {
    if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
      show.value = true
      return
    }
    if (!collapse) {
      setTimeout(() => {
        show.value = !collapse
      }, 400)
    } else {
      show.value = !collapse
    }
  }
)

watch(
  () => layout.value,
  (layout) => {
    if (layout === 'top' || layout === 'cutMenu') {
      show.value = true
    } else {
      if (unref(collapse)) {
        show.value = false
      } else {
        show.value = true
      }
    }
  }
)
</script>

<template>
  <div>
    <router-link :class="[
      prefixCls,
      layout !== 'classic' ? `${prefixCls}__Top` : '',
      'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative decoration-none overflow-hidden title-header'
    ]" to="/">
      <img src="@/assets/imgs/logo.png" class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]" />
      <div v-if="show" :class="[
        'ml-10px text-16px font-700 ',
        {
          'text-[var(--logo-title-text-color)]': layout === 'classic',
          'text-[var(--top-header-text-color)]':
            layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
        }
      ]">
        {{ title }}
      </div>
      <div class="nav-daoru">
        <div class="nav-daoru-top flex_c aic">
          <img src="" alt="" />
          <p>本地导入</p>
        </div>
        <div class="nav-daoru-bottom">
          设置
        </div>
      </div>
    </router-link>
  </div>
</template>
<style lang="less" scoped>


.title-header {
  height: 74px;
  // display: none;
  // background: #1C53D9;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  font-family: 'PangMenZhengDao-Regular, PangMenZhengDao';
  font-weight: 400;
  color: #FFFFFF;
  font-size: 20px;

}
</style>
